<template>
  <Menu :isSearch="false"></Menu>
  <div class="checkSpace_box">
    <div class="checkSpace-back" @click="router.push('/showSpace')">
      <n-button text>
        <template #icon>
          <n-icon :component="ArrowBackOutline"/>
        </template>
        返回
      </n-button>
    </div>
    <div class="space_content">
      <div class="space_box">
        <div class="item_image" v-if="spaceData.space_image">
          <n-image
            width="120"
            :src="host + '/api/' + spaceData.space_image"
          />
        </div>
        <div class="item_text">
          <div style="font-size: 20px;font-weight: 700;">{{ spaceData.space_name }}</div>
          <div style="color: gray;margin-top: 5px;font-size: 13px;">成员数 {{spaceData.space_people}}人</div>
          <div style="margin-top: 30px;">
            <n-tag type="success" :bordered="false">
              已运营{{spaceData.create_day}}天，更新了{{ spaceData.space_essay_count }}篇内容
            </n-tag>
          </div>
        </div>
      </div>
      
      <div class="addSpace" >
        <n-button v-if="isBtn" type="success" size="large" style="float: right;" @click="join_Space">
          加入空间
        </n-button>
        <n-button v-else size="large" style="float: right;" @click="exit_Space">
          退出空间
        </n-button>
        <div style="clear: both;"></div>
      </div>

      <div class="spacePeople">
        <div class="peopleImage" v-if="userData.avatar">
          <n-avatar
            round
            size="large"
            :src="host + '/api/' + userData.avatar"
          />
        </div>
        <div class="peopleDescriptiont">
          <div style="display: flex;justify-content: space-between;">
            <div>{{ userData.username }} 
              <n-tag type="warning" :bordered="false" size="small">
                空间主
              </n-tag>
            </div>
            <div style="color: #63e2b7;">今天活跃</div>
          </div>
          <div style="margin-top: 5px;">{{ userData.sign }}</div>
        </div>
      </div>

      <div class="spaceDescriptiont">
        <div style="font-size: 20px;font-weight: 700;">空间描述</div>
        <div class="spaceDescriptionContent">
          {{ spaceData.space_description }}
        </div>
      </div>
      <n-divider />
      <div class="spaceDescriptiont" v-if="spaceData.space_light_description||spaceData.space_light_image[0]">
        <div style="font-size: 20px;font-weight: 700;">空间亮点</div>
        <!-- <n-divider /> -->
        <div style="margin-top: 20px;">
          {{ spaceData.space_light_description }}
        </div>
        <!-- <n-divider /> -->
        <div>
          <n-image v-for="item in spaceData.space_light_image" :src="host + '/api/' + item" width="700" style="margin-top: 20px;"></n-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ArrowBackOutline } from '@vicons/ionicons5'
import {spaceDateType} from "../../types"
import {onMounted,ref,Ref,inject} from "vue"
import Menu from "../../components/Menu.vue"
import {getOneSpace,joinSpace,getUserJoinSpace,exitSpace} from "../../api/space"
import {GetUserMess} from "../../api/user"
import { useRouter } from 'vue-router';
const router = useRouter()

const host = ref(inject('host'))
let space_id:Ref<number> = ref(0)
const userData:any = ref({})
const isBtn = ref(true)

const spaceData:Ref<spaceDateType> = ref(
  {
    space_id: 0,
    space_name: "",
    space_image: "",
    username: "",
    create_day: "",
    space_people: "",
    space_essay_count: "",
    space_description: "",
    space_light_description: "",
    space_light_image: []
  },
)

type spaceType = {
  space_name: string,
  space_id: string
}

onMounted(async() => {
  space_id.value = Number.parseInt(router.currentRoute.value.params.spaceId as string)
  const res = await getOneSpace(space_id.value)
  if(res.code != "200"){
    window.$message.warning(res.message)
  }else{
    spaceData.value = res.data
  }

  // 判断是否加入空间
  const phone = localStorage.getItem("token") || ""
  const join_res = await getUserJoinSpace(phone)
  if(join_res.code!="200"){
    // window.$message.warning(join_res.message)
  }else{
    let result = []
    result = join_res.data.filter((e:spaceType) => e.space_id == router.currentRoute.value.params.spaceId as string)
    if(result[0]){
      isBtn.value = false
    }
  }

  const user_res = await GetUserMess(res.data.phone)
  if(user_res.code!="200"){
    window.$message.warning(user_res.message)
  }else{
    userData.value = user_res.data
  }
})

const join_Space = async() => {
  const res = await joinSpace({
    space_id: space_id.value,
    phone: localStorage.getItem("token")||""
  })
  if(res.code != "200"){
    window.$message.warning(res.message)
  }else{
    window.$message.success("加入成功！")
    router.push("/home/spaceHome/" + space_id.value)
  }
}

const exit_Space = async() => {
  const res = await exitSpace({
    space_id: space_id.value,
    phone: localStorage.getItem("token")||""
  })
  if(res.code != "200"){
    window.$message.warning(res.message)
  }else{
    window.$message.success("退出成功！")
    router.push("/showSpace")
  }
}

</script>

<style lang='scss' scoped>
  .checkSpace_box{
    max-width: 1220px;
    margin: auto;
    min-height: 100vh;
    padding-bottom: 50px;
    padding-top: 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .checkSpace-back{
      width: 100%;
      text-align: left;
    }

    .space_content{
      width: 740px;
      // margin-top: 80px;
      border-radius: 5px;
      // border: 1px solid rgba(92, 199, 199, 0.7);
      box-shadow: 0 2px 12px 0 #63e2b7;
      background-color: var(--bs-content-background);

      .space_box{
        width: 100%;
        min-height: 120px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        border-bottom: 1px solid rgba(92, 199, 199, 0.7);
        .item_image{
          width: 120px;
          height: 120px;
        }
        .item_text{
          // width: 640px;
          margin-left: 30px;
        }
      }

      .addSpace{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(92, 199, 199, 0.7);
      }

      .spacePeople{
        padding: 20px;
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid rgba(92, 199, 199, 0.7);
        .peopleImage{
          padding-top: 5px;
        }

        .peopleDescriptiont{
          width: 100%;
          padding-left: 20px;
        }
      }

      .spaceDescriptiont{
        padding: 20px;
        .spaceDescriptionContent{
          margin-top: 20px;
          white-space:pre-wrap;
          overflow: hidden;
          // text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 10;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
</style>